<template>
  <div class="login" v-if="isToLogin">
    <div class="login-header">
      <h3 v-if="isGoto===1">登录</h3>
      <h3 v-if="isGoto===2">手机号登录</h3>
      <h3 v-if="isGoto===3">注册</h3>
      <i @click="IS_TO_LOGIN(false)" class="el-icon-close"></i>
    </div>
    <div class="login-contain" v-if="isGoto===1">
      <div class="contain">
        <div class="contain-left">
          <img src="../../assets/img/platform.png" alt="" />
          <button @click="phoneLogin" class="login_button">手机号登录</button>
          <button @click="register" class="reg-btn">注 &nbsp; 册</button>
        </div>
        <ul class="contain-right">
          <li>
            <i class="logo_inco logo1"></i>
            <span>微信登录</span>
          </li>
          <li>
            <i class="logo_inco logo2"></i>
            <span>QQ登录</span>
          </li>
          <li>
            <i class="logo_inco logo3"></i>
            <span>微博登录</span>
          </li>
          <li>
            <i class="logo_inco logo4"></i>
            <span>网易邮箱账号登录</span>
          </li>
        </ul>
      </div>
      <div class="login-footer">
        <input v-model="user.checked" type="checkbox" name="xieyi" id="" />
        <p>
          <span>同意</span> 
          <a href="">《服务条款》</a>
          <a href="">《隐私政策》</a>
          <a href="">《儿童隐私政策》</a>
        </p>
      </div>
    </div>
    <PhoneLogin :isGoto.sync="isGoto" />
  </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
import PhoneLogin from './PhoneLogin'
export default {
  name: 'login',
  data() {
    return {
      user:{
         checked:false,
      },
      /* 是1的话代表 是选择手机号登录和注册页面
        2 代表手机号登录页面
        3 代表 注册页面  注册暂时不做！！！！！！ */
      isGoto:1
     
    }
  },
  computed:{
    ...mapState("playlist",["isToLogin"])
  },
  components:{
    PhoneLogin
  },
  methods:{
    //控制登陆模态框
    ...mapMutations("playlist",["IS_TO_LOGIN"]),
    // 判断是否同意了服务条款
    isChecked(){
      const {checked} =this.user
      if(!checked){
         this.$message({
          message: '请同意服务条款',
          type: 'warning'
        });
        return false
      }
      return true
    },
    // 手机号登录
    phoneLogin(){
     if(this.isChecked()){
      this.isGoto=2
     }

    },
    // 去注册
    register(){
       if(this.isChecked()){
          this.isGoto=3
       }

    }
  }
}
</script>

<style lang="less" scoped>
.login {
  width: 528px;
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  // top: 200px;
  // right: 500px;
  .login-header {
    border-radius: 5px 5px 0 0;
    line-height: 38px;
    height: 38px;
    font-size: 14px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    justify-content: space-between;
    background-color: #242424;
    color: #fff;
  }
}
.login-contain {
  box-shadow: 0 20px 20px #888;
  background-color: #fff;
  box-sizing: border-box;
  padding: 39px 0;
  .contain {
    display: flex;
  }
  .contain-left {
    width: 224px;
    padding: 0 30px 3px 40px;
    border-right: 1px dotted #ccc;
    button {
      border: none;
      border-radius: 5px;
      margin-top: 10px;
      width: 219px;
      height: 31px;
      line-height: 31px;
      text-align: center;
    }
    // .phone-btn {
    //   background-color: #2b7cc9;
    //   color: #fff;
    // }
    .reg-btn {
      border: 1px solid #ccc;
    }
  }
}
.contain-right {
  padding: 3px 3px 0 39px;
  li{
    display: flex;
    align-items: center;
    margin-top: 15px;
    i{
      display: inline-block;
      width: 38px;
      height: 38px;
      margin-right: 14px;
    }
    .logo1{
       background-position: -150px -670px;
    }
    .logo2{
       background-position: -190px -670px;
    }
    .logo3{
       background-position: -230px -670px;
    }
    .logo4{
       background-position: -271px -670px;
    }
  }
 
}
.login-footer{
  display: flex;
  align-items: center;
  padding: 20px 0 0 39px;
  a{
    color: #507daf;
  }
  p{
    padding: 3px;
    span{
      color:#999999;
    }
  }
}
</style>
